<template>
  <div class="page-cont">
    <van-nav-bar
      title="梁片生产列表"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <scroll-list
      v-model="list"
      @onLoad="onLoad"
    >
      <div class="title">
        {{ title }}
      </div>
      <div
        class="beam-item"
        v-for="(item, i) in list"
        :key="i"
      >
        {{ item.beamName }}
        <div class="time">
          浇筑时间：{{ item.pouringTime | timeDate('YYYY-MM-DD HH:mm') }}
        </div>
      </div>
    </scroll-list>
  </div>
</template>

<script>
import ScrollList from "@/components/ScrollList/index.vue";
export default {
  name: "ProduceSummary",
  components: {
    ScrollList,
  },
  data() {
    return {
      type: "",
      list: [],
      title: "",
      query: {},
    };
  },
  created() {
    this.type = this.$route.params.type;
    this.title = this.$route.query.title;
    this.query = JSON.parse(this.$route.query.json);
  },
  methods: {
    async onLoad(page, done) {
      let res;
      if (this.type == "week") {
        res = await this.api.WEEK_INFORMATION({
          pageNo: page,
          pageSize: 15,
          ...this.query
        });
        this.list.push(...res.list);
      } else if (this.type == "month") {
        res = await this.api.MONTH_INFORMATION({
          pageNo: page,
          pageSize: 15,
          ...this.query
        });
        this.list.push(...res.list);
      }

      // 触发加载完成 大于50模拟全部加载完成
      done(res.pageNo === res.totalPage);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.page-cont {
  background: #f5f5f5;
  color: #333;
}
.title {
  padding: 10px 15px;
  background: #fff;
  font-size: 16px;
}
.beam-item {
  padding: 15px;
  margin-top: 10px;
  background: #fff;
}
</style>
